<template>
    <!-- 弹出 -->
    <div class="wrap">
        <!-- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
        </el-checkbox> -->
        <div v-for="city in options" :key="city.value" class="item">
            <el-popover placement="bottom-start" :width="600" trigger="click">
                <div>
                    <el-cascader-panel :options="[city]" :props="{ multiple: true, expandTrigger: 'hover' }"
                        @change="selectAll" />
                </div>
                <template #reference>
                    <div>{{
                            city.label
                    }}<el-icon>
                            <ArrowDownBold />
                        </el-icon>
                    </div>
                </template>
            </el-popover>
        </div>

    </div>
</template>

<script setup>
import { computed, onMounted, ref, unref } from 'vue'
import { ArrowDownBold, Search } from '@element-plus/icons-vue'
import { reqGetReportJson } from "@/api/mock"
const checkAll = ref(false)
const isIndeterminate = ref(true)
const cities = ref([])
const SelectData = ref([])
const getList = async () => {
    const result = await reqGetReportJson()
    cities.value = result.results
}
onMounted(() => {
    getList()
})
const handleCheckAllChange = (val) => {
    checkedCities.value = val ? cities : []
    isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === cities.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
const dataOptions = (aaa) => {
    return aaa.map(({ id, label, children, level }) => {
        let list
        if (children && Array.isArray(children)) {
            if (level === 1 && label.search(/[市|行政区]/) >= 0) {
                list = dataOptions(children[0].children)
            } else {
                list = dataOptions(children)
            }
        }
        return { value: id, label, children: list, level }
    })
}
const options = computed(() => {
    return dataOptions(cities.value)
})

const selectAll = (a) => {
    // 当前一级id
    const idList = a[0]
    // console.log('数据', a);
    // 当前id一级数据
    const current1 = cities.value.filter(item => {
        if (item.id == a[0][0]) {
            return item.children[0]
        }
    })
    // 当前id二级数据
    const current2 = cities.value.filter(item => {
        if (item.id == a[0][0]) {
            return item.children[0].children[0]
        }
    })
    // 当前id三级数据
    const current3 = cities.value.filter(item => {
        if (item.id == a[0][0]) {
            return item.children[0].children[0].children[0]
        }
    })
    let id = []
    console.log('一级二级数据', current1.children, current2.children);

    if (!idList[2]) {
        // 能进表示只有两级数据
        // if(current1)
        if (a.length == current1[0].children[0].children.length) {
            // 进入判断表示全选，渲染的数据是过滤之后的，这里判断使用的数据是完整数据
            // 全选表示只需要前面两级的id
            id.push(current1[0].id)
            id.push(current1[0].children[0].id)
        } else {
            // 进入这里表示数据并没有全选,直接提交全部数据
            id.push(a)
        }
    } else {
        // 进入表示为三级
        const id1 = a[0][0]
        const id2 = a[0][1]
        const id3 = a[0][2]
        // 将获取到的数组降维，判断id出现的次数，如果出现次数=langth表示全选，如果没有需要继续拆分
        console.log('a', a);
    }

}
</script>

<style lang="scss" scoped>
.wrap {
    display: flex;
    flex-wrap: wrap;

    .item {
        margin: 20px 70px;
    }
}
</style>